angular
.module('SevenSegmentDirectives', [])
  .directive('colon', function() {
    return {
      restrict: 'E',
      scope: { size: '=' },
      template: '<canvas></canvas>',
      link: function(scope, element, attrs) {
        var canvas = element.find('canvas')[0];
        var ctx = canvas.getContext('2d');
        var digit = new SevenSegmentDigit({ SegmentLength: scope.size, Angle: 10, RatioLtoH: 4, RatioLtoS: 32 });
        canvas.height = digit.height;
        canvas.width = digit.width;

        var angleRad = digit.angle * Math.PI / 180;
        var angle = Math.atan(Math.cos(angleRad) / (1 + Math.sin(angleRad)));
        var yshift = digit.halfWidth + digit.spacing * (Math.sin(angle) + Math.cos(angle)) + 1;
        var topdotY = yshift                              - digit.spacing * Math.sin(angle);
        topdotY += Math.cos(angleRad) * digit.segmentLength / 2;
        var bottomdotY = yshift                            +  digit.segmentLength * Math.cos(angleRad) + digit.spacing * Math.cos(angle);
        bottomdotY += Math.cos(angleRad) * digit.segmentLength / 2;

        var colonWidth = (bottomdotY - topdotY) * Math.sin(angleRad) + digit.segmentWidth + 3;
        canvas.width = colonWidth;

        ctx.beginPath();
        ctx.arc(colonWidth - digit.halfWidth - 2, topdotY, digit.halfWidth, 0, 2 * Math.PI);
        ctx.arc(digit.halfWidth + 1, bottomdotY, digit.halfWidth, 0, 2 * Math.PI);
        ctx.fillStyle = 'rgba(255,255,255,.87)';
        ctx.fill();

      }
    }
  })
  .directive('digit', function() {
    return {
      restrict: 'E',
      scope: { value: '@', size: '='},
      template: '<canvas></canvas>',
      link: function(scope, element, attrs) {
        var canvas = element.find('canvas')[0];
        var ctx = canvas.getContext('2d');
        var digit = new SevenSegmentDigit({ SegmentLength: scope.size, Angle: 10, RatioLtoH: 4, RatioLtoS: 32 });
        canvas.height = digit.height;
        canvas.width = digit.width;
        scope.$watch('value', function(v) {
          ctx.clearRect(0,0,canvas.width,canvas.height);
          for (var j = 0, segment = digit.segments[0]; segment; segment = digit.segments[++j]) {
            var display = (scope.value == null || scope.value == '' ? 10 : scope.value === 'd' ? 11 : scope.value);
            ctx.fillStyle = 'rgba(255,255,255,' + (digit.matrix[display][j] ? .87 : .05) + ')';
            ctx.beginPath();
            ctx.moveTo(segment[0].x, segment[0].y);
            for (var i = 1,point = segment[i]; i < segment.length; point = segment[++i]) {
              ctx.lineTo(point.x, point.y);
            }
            ctx.closePath();
            ctx.fill();
          }
        });
      }
    };
  })
  .directive('clock', function() {
    return {
      restrict: 'E',
      scope: { alarm: '=', size: '=' },
      //template: '<span ng-if="alarm.days > 0">we have days!<digit value="d" size="size"></digit><digit value="d" size="size"></digit></span><digit value="alarm.hourTen" size="size"></digit><digit value="alarm.hourOne" size="size"></digit><colon size="size"></colon><digit value="alarm.minuteTen" size="size"></digit><digit value="alarm.minuteOne" size="size"></digit><colon size="size"></colon><digit value="alarm.secondTen" size="size"></digit><digit value="alarm.secondOne" size="size"></digit>'
      template: '<span ng-if="alarm.days > 0"><digit ng-repeat="d in alarm.days.toString() track by $index" value="{{d}}" size="size"></digit><digit value="d" size="size"></digit><digit size="size"></digit></span><digit value="{{alarm.hourTen}}" size="size"></digit><digit value="{{alarm.hourOne}}" size="size"></digit><colon size="size"></colon><digit value="{{alarm.minuteTen}}" size="size"></digit><digit value="{{alarm.minuteOne}}" size="size"></digit><colon size="size"></colon><digit value="{{alarm.secondTen}}" size="size"></digit><digit value="{{alarm.secondOne}}" size="size"></digit>'
    };
  })